New Style and Modify Style Dialog Boxes, Layout

  • Article

 

The Layout category of the New Style and Modify Style dialog box enables you to define cascading style sheet (CSS) style rules for the layout of UI elements on a Web page. You can apply these style rules directly to HTML elements or add them either to the current page or to an external style sheet.

To define a CSS layout style rule for UI elements on the current page

  1. Open the page in either Design view or Source view.

  2. Optionally, select the text and/or HTML elements to apply the style to.

  3. In the Format menu, click New Style.

    The New Style dialog box is displayed.

  4. In the Category pane, select Layout.

    The layout style selections are displayed in the right pane.

When you apply styles to selected text in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes.

To add layout attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet.

  2. Put the cursor inside the braces of the style rule to be modified.

  3. Do one of the following.

    • Right-click the style sheet in the editor, and then from the shortcut menu, choose Build Style.

    • In the Style Sheet Toolbar, choose Build Style.

    The Modify Style dialog box is displayed.

  4. In the left pane, click Layout.

    The layout style selections appear in the right pane.

You can apply a CSS style class to an element in the Web page or to the body element itself by setting the element's class property to the name of the class selector.

UIElement List

The following tables list options that are available under the Layout category in the New Style and Modify Style dialog boxes.

Layout Options

  • visibility
    Whether an element is visible or hidden. Values are as follows:

    • collapse   When used with table elements, this value hides a row or a column. For all other elements, this value means the same as hidden.

    • hidden   Makes the element invisible.

    • visible   Makes the element visible.

    • inherit   The element inherits its visibility property from a parent element.

  • display
    How an element is displayed. Values are as follows:

    • block   The element will be displayed at block level with line breaks before and after it.

    • inline   The element will be displayed inline with no line breaks before or after it.

    • inline-box   The element will be displayed inline as a box with no line breaks before or after the box.

    • inline-table   The element will be displayed inline as a table with no line breaks before or after the table.

    • list-item   The element will be displayed as an item in a list.

    • none   The element will be hidden.

    • run-in   The element will be displayed either at block level or inline, depending on the context.

    • table   The element will be displayed as a block table with a line break before and after the table.

    • table-caption   The element will be displayed as a table caption.

    • table-cell   The element will be displayed as a table cell.

    • table-column   The element will be displayed as a table column.

    • table-column-group   The element will be displayed as a group of table columns. This group might contain one or more columns.

    • table-footer-group   The element will be displayed as a group of table footers. This group might contain one or more footers.

    • table-header-group   The element will be displayed as a group of table headers. This group might contain one or more headers.

    • table-row   The element will be display as a table row.

    • table-row-group   The element will be displayed as a group of table rows. This group might contain one or more rows.

    • inherit   The element inherits its display property from a parent element.

  • float
    Whether an element will float to the left or right, enabling text to wrap around it, or be displayed inline. This property is most often used with images, but it applies to text blocks as well. Values are as follows:

    • left   The element floats to the left, inside the parent element.

    • none   The element is displayed inline where it appears in the text.

    • right   The element floats to the right, inside the parent element.

    • inherit   The element inherits its float property value from a parent element.

  • clear
    Which sides of an element disallow floating elements. Values are as follows:

    • both   The element disallows floating elements on its left or right side.

    • left   The element moves below a floating element that is on its left side.

    • none   The element allows floating elements on all sides.

    • right   The element moves below a floating element that is on its right side.

    • inherit   The element inherits its clear property from a parent element.

  • cursor
    What type of cursor to display. Values are as follows:

    • auto (default)   The browser sets the cursor.

    • crosshair   The cursor is rendered as a crosshair.

    • default   The default cursor (often an arrow).

    • e-resize   The cursor used for resizing an element to the right (east).

    • help   The cursor that indicates that help is available (often a question mark).

    • move   The cursor that indicates an object can be moved.

    • n-resize   The cursor used for resizing an element to the upward (north).

    • ne-resize   The cursor used for resizing an element to the up and right (northeast).

    • nw-resize   The cursor used for resizing an element to the up and left (northwest).

    • pointer   The cursor is rendered as a pointer (often a hand).

    • progress   The cursor that indicates the program is making progress.

    • s-resize   The cursor used for resizing an element to the downward (south).

    • se-resize   The cursor used for resizing an element to the down and right (southeast).

    • sw-resize   The cursor used for resizing an element to the down and left (southwest).

    • text   The cursor used for text.

    • w-resize   The cursor used for resizing an element to the left (west).

    • wait   The cursor that indicates the program is busy (often an hourglass).

    • inherit   The element inherits its cursor property from a parent element.

  • overflow
    What happens when the content of an element overflows its area. Values are as follows:

    • auto   Scroll bars are displayed only if the content is clipped.

    • hidden   The content is clipped to fit the element and no scroll bar is displayed.

    • scroll   The content is clipped to fit the element and a scroll bar is displayed.

    • visible (default)   The content is displayed even if it is outside the element.

    • inherit   The element inherits its overflow property from a parent element.

  • clip
    The rectangular dimensions of an element. If the element is larger than the defined area, it will be clipped to fit the area. To specify the dimensions, use the top, right, bottom, and left boxes.

  • top
    The top edge of the clip rectangle. If you specify a value, you can select units in the list.

  • right
    The right edge of the clip rectangle. If you specify a value, you can select units in the list.

  • bottom
    The bottom edge of the clip rectangle. If you specify a value, you can select units in the list.

  • left
    The left edge of the clip rectangle. If you specify a value, you can select units in the list.

Other UI Elements

  • Selector
    (New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.

  • Define in
    (New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:

    • Current page   The style rule is written to a style element in the current page.

    • New style sheet   A new CSS style sheet is added to the project and the rule is written in it.

    • Existing style sheet   The style rule is added to the CSS style sheet that you specify by using the URL list.

  • URL
    (New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.

  • Apply new style to document selection
    (New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.

  • Preview
    Displays an example of how the style rule will appear when it is applied.

  • Description
    Shows the CSS definition of the style rule.

See Also

Working with CSS Overview